import React, { useEffect } from 'react';
import styles from './index.less';
import { transData } from './transData';

const GreenLineComponent = ({ data = [] }) => {
  useEffect(() => {
    // 创建绿色折线图层
    const layerId = 'green-line-layer';
    const groupId = 'dynamic-lines-group';

    // 初始化图层
    window?.LFTViewer?.setLFTAllData([
      {
        type: 'ctrl',
        payload: [
          {
            ctrl: 'createLayer',
            id: layerId,
            groupId: groupId,
            options: { zIndex: 600 },
          },
        ],
      },
    ]);

    // 添加转换后的数据
    const convertedData = transData(data);
    window?.LFTViewer?.setLFTAllData(
      convertedData.map((item) => ({
        ...item,
        payload: {
          ...item.payload,
          layerId: layerId,
          groupId: groupId,
        },
      })),
    );

    return () => {
      // 组件卸载时清理
      window?.LFTViewer?.setLFTAllData([
        {
          type: 'ctrl',
          payload: [
            {
              ctrl: 'remove',
              id: 'green-line',
            },
          ],
        },
      ]);
    };
  }, []);

  return null;
};

export default GreenLineComponent;
